<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Markdown- Phoenix</title>


    <style>
        {{{BOOTSTRAP_LIB_CSS}}}
    </style>
    <style>
        {{{HIGHLIGHT_JS_CSS}}}
    </style>
    <script>
        {{{HIGHLIGHT_JS}}}
    </script>
    <style>
        {{{GFM_CSS}}}
    </style>
    <script>
        {{{TRUSTED_ORIGINS_EMBED}}}
        // this is for managing who am i context in iframes embedded in phoenix to have special handling.
        window.addEventListener('message', function(event) {
            if (!TRUSTED_ORIGINS_EMBED[event.origin]) {
                return; // Ignore messages from unexpected origins
            }

            if(event.data.type === "WHO_AM_I_RESPONSE") {
                window.__PHOENIX_EMBED_INFO = {
                    isTauri: event.data.isTauri,
                    platform: event.data.platform
                };
            } else if(event.data.type === "_TEST_FOCUS_CLICK") { // for integ tests
                document.body.click();
            }  else if(event.data.type === "_TEST_SELECT_TEXT_AND_CLICK") { // for integ tests
                const selection = window.getSelection();
                const range = document.createRange();
                range.selectNodeContents(document.body);
                selection.removeAllRanges(); // Clear any existing selections
                selection.addRange(range);
                document.body.click();
            }  else if(event.data.type === "_TEST_UNSELECT_TEXT_AND_CLICK") { // for integ tests
                window.getSelection().removeAllRanges();
                document.body.click();
            }
        });
        if(window.self !== window.parent){
            // in an iframe
            window.parent.postMessage({
                handlerName: "ph-liveServer",
                eventName: 'whoAmIframePhoenix',
                href: location.href
            }, "{{{PARENT_ORIGIN}}}");
        }
    </script>
    <script type="text/javascript">
        function inIframe () {
            try {
                return window.self !== window.top;
            } catch (e) {
                return true;
            }
        }

        if(inIframe()) {
            // inside iframes, we disable ctrl-s browser save page workflow as it may be inside the phoenix window
            // It will confuse the use seeing the browser save dialog inside phoenix.
            document.savePageCtrlSDisabledByPhoenix = true;
            document.addEventListener("keydown", function(e) {
                if (window.__PHOENIX_EMBED_INFO &&
                    e.key === 's' && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
                    // we only do this in iframes embedded directly inside phoenix, in popped out iframes
                    // we don't need to capture anything.
                    e.preventDefault();
                }
            }, false);
            function getAbsoluteUrl(url) {
                // Check if the URL is already absolute
                if (new RegExp("^(?:[a-z]+:)?\\/\\/", "i").test(url)) {
                    return url; // The URL is already absolute
                }

                // If not, create an absolute URL using the current page's location as the base
                const absoluteUrl = new URL(url, window.location.href);
                return absoluteUrl.href;
            }
            document.addEventListener('click', function(event) {
                // Get the user's current selection
                const selection = window.getSelection();

                // Check if there is a selection
                if (selection.toString().length === 0) {
                    // there may be selection like text or others Eg: user may select some text
                    // in live preview to copy, in which case we should not treat it as a live select.
                    // if there is no selection, then we have set the focus to the editor
                    window.parent.postMessage({
                        handlerName: "ph-liveServer",
                        eventName: 'embeddedIframeFocusEditor',
                        href: location.href
                    }, "{{{PARENT_ORIGIN}}}");
                }

                let target = event.target;
                // Traverse up the DOM tree to find if the target is within an <a> tag
                while (target && target.tagName !== 'A') {
                    target = target.parentNode;
                }

                // in desktop phoenix builds, tauri will not open anchor tags in browser if it is in
                // an iframe(except for the intel mac bug)
                // in normal browsers, we dont need to do this.
                if (window.__PHOENIX_EMBED_INFO && window.__PHOENIX_EMBED_INFO.isTauri &&
                    target.tagName === 'A' && (target.target === '_blank')) {
                        const href = getAbsoluteUrl(target.getAttribute('href'));
                        window.parent.postMessage({
                            handlerName: "ph-liveServer",
                            eventName: 'embeddedIframeHrefClick',
                            href: href
                        }, "{{{PARENT_ORIGIN}}}");
                        // in intel mac desktop, tauri seems to open in browser
                        // causing 2 tabs to open. in m1 macs its not there. so we prevent default behavior.
                        event.stopImmediatePropagation();
                        event.preventDefault();
                }
            }, true);
        }

        window.addEventListener('scroll', function () {
            // save scroll position
            sessionStorage.setItem("saved-scroll-" + location.href, JSON.stringify({
                scrollX: window.scrollX,
                scrollY: window.scrollY
            }));
        });
        function scrollToLastPosition() {
            let saved = JSON.parse(sessionStorage.getItem("saved-scroll-" + location.href));
            if(saved){
                window.scrollTo({
                    left: saved.scrollX,
                    top: saved.scrollY,
                    behavior: "instant"
                });
            }
        }

    </script>
    <style>

        *{
            margin:0;
            padding: 0;
        }
        html{height:100%;}

        body{
            height:100%;
        }
        .header{
            height:6%;
            width:100%;
            background-color:#444444;
        }
        .contain{
            width:100%;
            height:99%;
        }
        .input{
            width:50%;
            height:93%;
            float:left;
            background-color: #F9F9F5;
        }

        #text-input{
            height:100%;
            width:90%;
            border:0px;
            font-size:15px;
            background-color: #F9F9F5;
            resize:none;
            outline:none;
        }
        #preview{
            width:50%;
            height: 93%;
            float: right;
            font-size:16px;
            background-color: #F9F9F5;
            overflow:scroll;
            overflow-x: hidden;
        }
        table { border-collapse: collapse; }
        tr { border-bottom: solid 1px black; }
        tr:nth-child(even) {background-color: #f2f2f2;}
        /* srcollbar */
        ::-webkit-scrollbar{
            width:12px;
        }
        ::-webkit-scrollbar-thumb{
            /* border-radius:10px; */
            background-color:#DEE4E4;
        }
        ::-webkit-scrollbar-track{
            /* border-radius:10px; */
            background-color:#EBEEEC;
        }

    </style>
</head>
<body onload="scrollToLastPosition();hljs.highlightAll();">
{{{markdownContent}}}
</body>
</html>


